<!--<script setup lang="ts">-->

<!--</script>-->

<script>
import { onMounted, reactive, toRefs } from 'vue'
export default {
  name: 'App',
  setup() {
    // 1 记录一个鼠标坐标
    const mouse = reactive({ x: 0, y: 0 })

    // 修改鼠标坐标
    const move = (e) => {
      mouse.x = e.pageX
      mouse.y = e.pageY
    }
    onMounted(() => {
      document.addEventListener('mousemove', move)
    })
    // 这里把 mouse展开以后,就可以直接在页面上使用 x y 属性
    return {...onMounted(), ...toRefs(mouse)}
  }
}
</script>


<template>
  <h1>记录鼠标坐标</h1>

  <duv class="container">
    <div>x: {{ x }}</div>
    <div>y: {{ y }}</div>
  </duv>
</template>

<style scoped>

</style>
